import React from 'react';
import { Input, Button } from 'antd';
import classNames from 'classnames';
import { isEqual, isEmpty } from 'lodash';
const InputGroup = Input.Group;
import {WeaLocaleProvider, WeaTable} from 'ecCom';
import {formatData} from "../../util/common";
const getLabel = WeaLocaleProvider.getLabel;
class ContactsCom extends React.Component {

	openHrm(url){
		if(url) window.open(url);
	}
	render(){
        const { eid, list, esetting } = this.props;
        const { widths, imgSymbol, fontStyle={}, dataColoums } = esetting;
        const { contentfontsize = '12' } = fontStyle;

        let trArr = new Array;
        let titleArr = new Array;
		let ContactHtml = '';
		let columns = new Array;
		columns = formatData(list[0], esetting);
		ContactHtml = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ix1b2s`} style={{fontSize: '20px'}} columns={columns} showHeader={esetting.showHeader == '1'} pagination={false} dataSource={list} size="small"/>
// console.log(widths[companyworkyear])
//         titleArr.push(<td height="31" width="8px"></td>);
        // dataColoums.map((item, index) => {
        //     let size = 1;
		//
        //     let html1 = (<td  data-order={size-1} height="31" style={{textAlign:'left',minWidth:'50px'}}>
		// 		<font className={`font wea-f${contentfontsize}`}>{item.fieldName}</font>
		// 	</td>)
        //     titleArr.push(html1);
        // })
		// let width = titleArr.dataIndex && widths[titleArr.dataIndex];
        // console.log(width)
		// list.map((item,i)=>{
		// 	let size = 1;
		// 	var tdArr = new Array;
		// 	var index = 0;
		// 	tdArr.push(<td height="31" width="8px">{imgSymbol ? <img style={{verticalAlign: 'super'}} name='esymbol' src={imgSymbol}/>: null}</td>);
		// 	for (var k in item) {
		// 		if('name'=== k) {
		// 			tdArr.push(<td  height="31" style={{minWidth :"50px",width:widths.k}}  data-order={size - 1}>
		// 				<a href="javascript:void(0);" onClick={this.openHrm.bind(this, item[k].link)}><font
		// 					className={`font wea-f${contentfontsize}`} style={{cursor: 'pointer'}}>{item[k].name}</font></a>
		// 			</td>);
		// 		// }else{
		// 		}else if('jobactivity'=== k){
		// 			tdArr.push(<td width={widths[index]} data-order={size-1} height="31" style={{minWidth :"50px",textAlign:'left',width:widths.k}}>
		// 				<font className={`font wea-f${contentfontsize}`}><div dangerouslySetInnerHTML={{ __html: item[k] }} /></font>
		// 			</td>)
		// 		}else if('id'=== k){
        //             tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left',minWidth :"50px",width:widths.k}}>
        //                 <font className={`font wea-f${contentfontsize}`}><div dangerouslySetInnerHTML={{ __html: item[k] }} /></font>
        //             </td>)
		// 			    }else if('orgidspan'=== k) {
		// 			tdArr.push(<td width={widths[index]} height="31" data-order={size - 1}
		// 						   style={{textAlign: 'left', minWidth: "50px", width: widths.k}}>
		// 				<font className={`font wea-f${contentfontsize}`}>
		// 					<div dangerouslySetInnerHTML={{__html: item[k]}}/>
		// 				</font>
		// 			</td>)
		// 		}else if('orgid'=== k){
		// 			tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left',minWidth :"50px",width:widths.k}}>
		// 				<font className={`font wea-f${contentfontsize}`}><div dangerouslySetInnerHTML={{ __html: item[k] }} /></font>
		// 			</td>)
					//     }else if('subcompany'=== k){
                //     tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left'}}>
                //         <font className={`font wea-f${contentfontsize}`}>{item[k]}</font>
                //     </td>)
                // }else if('tel'=== k){
				// 	tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left'}}>
				// 		<font className={`font wea-f${contentfontsize}`}>{item[k]}</font>
				// 	</td>)
				// }else if('mobile'=== k){
				// 	tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left'}}>
				// 		<font className={`font wea-f${contentfontsize}`}>{item[k]}</font>
				// 	</td>)
				// }else if('email'=== k){
				// 	tdArr.push(<td width={widths[index]} height="31" data-order={size-1} style={{textAlign:'left'}}>
				// 		<font className={`font wea-f${contentfontsize}`}>{item[k]}</font>
				// 	</td>)
		// 		}else{
        //             tdArr.push(<td style={{textAlign:'left',minWidth :"50px",width:widths.k+'px'}} height="31" data-order={size-1} >
        //                 <font className={`font wea-f${contentfontsize}`}>{item[k]}</font>
        //             </td>)
		// 		}
		// 		index+=1;
		// 	}
		// 	trArr.push(<tr height="31">{tdArr}</tr>);
		// });
			return<table id={`_contenttable_${eid}`} className="Econtent elementdatatable contact-elementdatatable"  style={{tableLayout:'auto',margin:0}}>
				{ContactHtml}
				</table>

	}
}

const SearchInput = React.createClass({
	getInitialState() {
		return {
			value: '',
			focus: false,
		};
	},
	handleInputChange(e) {
		this.setState({
			value: e.target.value,
		});
		setTimeout(() => this.props.onSearch(this.state.value), 500);
	},
	handleFocusBlur(e) {
		this.setState({
			focus: e.target === document.activeElement,
		});
	},
	handleSearch() {
		if (this.props.onSearch) {
			this.props.onSearch(this.state.value);
		}
	},
	render() {
		const { style, size, placeholder } = this.props;
		const btnCls = classNames({
			'ant-search-btn': true,
			'ant-search-btn-noempty': !!this.state.value.trim(),
            'portal-serachButton': true
		});
		const searchCls = classNames({
			'ant-search-input': true,
			'ant-search-input-focus': this.state.focus,
		});
		return (
			<div className="ant-search-input-wrapper" style={style}>
        <InputGroup ecId={`${this && this.props && this.props.ecId || ''}_InputGroup@41rnci`} className={searchCls}>
          <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@popmec`} placeholder={placeholder} value={this.state.value} onChange={this.handleInputChange}
            onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} onPressEnter={this.handleSearch}
          />
          <div className="ant-input-group-wrap">
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@d1pycz`} icon="search" className={btnCls} size={size} onClick={this.handleSearch} />
          </div>
        </InputGroup>
      </div>
		);
	},
});

module.exports = {
    ContactsCom,
    SearchInput
};
